// 引入 react 依赖
import React, { Component, useState, useEffect } from 'react';
import { connect } from 'react-redux';
import { NativeEventEmitter, ScrollView, TextInput, NativeModules, Platform, StyleSheet, Text, View, Image, TouchableOpacity, Alert, Switch, ImageBackground } from 'react-native';

// 引入第三方依赖
import _ from 'lodash';
import axios from 'axios';
import Icon from 'react-native-vector-icons/dist/Ionicons';
import pureRender from 'pure-render-decorator';
import { Actions } from 'react-native-router-flux';

// antd 按需加载
import { Tabs, Toast, Portal } from '@ant-design/react-native';

// 引入 处理数据 所需文件
import { exById } from '../../../module/module.js'

// 引入样式
import Style from '../style.js';

// 引入公用组件
import { Layout, Title, NetInfoScene, Results, RefreshScrollView, ScrollableTabBar, Radio } from '../../../components/index.js'

// 引入专用组件
import { } from '../components/index.js'

// 引入工具包
import { nblogo, classDefault } from '../../../util/images.js'
import { size, longitude, latitude, ScreenWidth } from '../../../util/utils.js'


class Access extends Component {

    constructor(props) {
        super(props)
        this.state = {
            exIndex: 0,
            exList: [],
            subscribe: 1,
            assets: 1,
            position: 1,
            operation: 1,
        }
    }

    componentDidMount() {
        const { userInfo } = this.props;
        console.log('access')
        let loading = Toast.loading('加载中', 0)
        exById({ userId: userInfo.id, }).then(res => {
            console.log(res)
            this.setState({
                exList: res.data
            })
        }).finally(() => {
            Portal.remove(loading)
        })
    }

    render() {
        const { exIndex, exList, subscribe, assets, position, operation, } = this.state
        console.log(exList)
        if (exList.length <= 0) {
            return null
        }
        return (
            <ScrollView>
                <View style={{ paddingTop: 4, paddingBottom: 16, marginBottom: 10, backgroundColor: '#10142D' }}>
                    <View style={{ flexDirection: 'row', alignItems: 'center', padding: 12 }}>
                        <View style={{ width: 4, height: 14, backgroundColor: '#7484FF', borderRadius: 2, marginRight: 8 }} />
                        <Text style={{ fontSize: 14, color: '#fff', lineHeight: 20, flex: 1 }}>账户概述</Text>
                    </View>
                    <View style={{ paddingLeft: 12, paddingRight: 4, flexDirection: 'row', }}>
                        {exList && exList.map((item, index) => {
                            return (
                                <View key={index} style={{ flexDirection: 'row', alignItems: 'center', backgroundColor: '#7484FF', paddingHorizontal: 10, paddingVertical: 8, borderRadius: 2, marginRight: 8 }}>
                                    <Text style={{ fontSize: 14, color: '#fff', lineHeight: 20, }}>{item.exchangeName}</Text>
                                    {/* <Text style={{ fontSize: 10, color: '#fff', lineHeight: 14, marginLeft: 8 }}>No.1</Text> */}
                                </View>
                            )
                        })}
                        <TouchableOpacity onPress={() => Actions.accessFirmOffer()}>
                            <View style={{ flexDirection: 'row', alignItems: 'center', backgroundColor: '#232B54', paddingHorizontal: 10, paddingVertical: 8, borderRadius: 2, marginRight: 8 }}>
                                <Icon name="md-add" size={14} color={'#fff'} style={{ marginRight: 8 }} />
                                <Text style={{ fontSize: 14, color: '#fff', lineHeight: 20, }}>接入更多</Text>
                            </View>
                        </TouchableOpacity>
                    </View>
                </View>
                <View style={{ paddingTop: 4, paddingBottom: 16, backgroundColor: '#10142D' }}>
                    <View style={{ flexDirection: 'row', alignItems: 'center', padding: 12 }}>
                        <View style={{ width: 4, height: 14, backgroundColor: '#7484FF', borderRadius: 2, marginRight: 8 }} />
                        <Text style={{ fontSize: 14, color: '#fff', lineHeight: 20, flex: 1 }}>我的{exList[exIndex] && exList[exIndex].exchangeName}</Text>
                        <TouchableOpacity onPress={() => Actions.accessFirmOffer()}>
                            <View style={{ flexDirection: 'row', alignItems: 'center', marginRight: -8 }}>
                                <Text style={{ fontSize: 14, color: '#8A90A8', lineHeight: 20, marginRight: 5 }}>点击查看</Text>
                                <Icon name="ios-arrow-forward" size={14} color={'#fff'} style={{ marginRight: 8 }} />
                            </View>
                        </TouchableOpacity>
                    </View>
                    <View style={{ height: .5, backgroundColor: '#232B54', marginTop: 4, marginHorizontal: 12 }}></View>
                    <View style={{ paddingHorizontal: 12, }}>
                        <Text style={{ fontSize: 14, color: '#FFF', lineHeight: 20, marginTop: 16, marginBottom: 14 }}>谁可以订阅我</Text>
                        <View style={{ paddingLeft: 16 }}>
                            <View style={{ flexDirection: 'row', alignItems: 'center', justifyContent: 'space-between', marginBottom: 16, }}>
                                <Text style={{ fontSize: 14, color: '#7484FF', lineHeight: 20, }}>所有人都可订阅</Text>
                                <Radio
                                    style={{}}
                                    checked={subscribe == 1}
                                    onChange={(value) => {
                                        this.setState({ subscribe: 1 })
                                    }}
                                    label={''}
                                />
                            </View>
                            <View style={{ flexDirection: 'row', alignItems: 'center', justifyContent: 'space-between', marginBottom: 16, }}>
                                <Text style={{ fontSize: 14, color: '#fff', lineHeight: 20, }}>仅支持订阅码订阅</Text>
                                <Radio
                                    style={{}}
                                    checked={subscribe == 2}
                                    onChange={(value) => {
                                        this.setState({ subscribe: 2 })
                                    }}
                                    label={''}
                                />
                            </View>
                        </View>
                    </View>
                    <View style={{ height: .5, backgroundColor: '#232B54', marginTop: 4, marginHorizontal: 12 }}></View>
                    <View style={{ paddingHorizontal: 12, }}>
                        <Text style={{ fontSize: 14, color: '#FFF', lineHeight: 20, marginTop: 16, marginBottom: 14 }}>展示范围</Text>
                        <View style={{ paddingLeft: 16 }}>
                            <View style={{ flexDirection: 'row', alignItems: 'center', justifyContent: 'space-between', marginBottom: 16, }}>
                                <Text style={{ fontSize: 14, color: '#fff', lineHeight: 20, }}>资产</Text>
                                <Radio
                                    style={{}}
                                    checked={assets == 1}
                                    onChange={(value) => {
                                        this.setState({ assets: 1 })
                                    }}
                                    label={'公开'}
                                />
                                <Radio
                                    style={{}}
                                    checked={assets == 2}
                                    onChange={(value) => {
                                        this.setState({ assets: 2 })
                                    }}
                                    label={'订阅我可见'}
                                />
                                <Radio
                                    style={{}}
                                    checked={assets == 3}
                                    onChange={(value) => {
                                        this.setState({ assets: 3 })
                                    }}
                                    label={'仅自己可见'}
                                />
                            </View>
                            <View style={{ flexDirection: 'row', alignItems: 'center', justifyContent: 'space-between', marginBottom: 16, }}>
                                <Text style={{ fontSize: 14, color: '#fff', lineHeight: 20, }}>持仓</Text>
                                <Radio
                                    style={{}}
                                    checked={position == 1}
                                    onChange={(value) => {
                                        this.setState({ position: 1 })
                                    }}
                                    label={'公开'}
                                />
                                <Radio
                                    style={{}}
                                    checked={position == 2}
                                    onChange={(value) => {
                                        this.setState({ position: 2 })
                                    }}
                                    label={'订阅我可见'}
                                />
                                <Radio
                                    style={{}}
                                    checked={position == 3}
                                    onChange={(value) => {
                                        this.setState({ position: 3 })
                                    }}
                                    label={'仅自己可见'}
                                />
                            </View>
                            <View style={{ flexDirection: 'row', alignItems: 'center', justifyContent: 'space-between', marginBottom: 16, }}>
                                <Text style={{ fontSize: 14, color: '#fff', lineHeight: 20, }}>操作</Text>
                                <Radio
                                    style={{}}
                                    checked={operation == 1}
                                    onChange={(value) => {
                                        this.setState({ operation: 1 })
                                    }}
                                    label={'公开'}
                                />
                                <Radio
                                    style={{}}
                                    checked={operation == 2}
                                    onChange={(value) => {
                                        this.setState({ operation: 2 })
                                    }}
                                    label={'订阅我可见'}
                                />
                                <Radio
                                    style={{}}
                                    checked={operation == 3}
                                    onChange={(value) => {
                                        this.setState({ operation: 3 })
                                    }}
                                    label={'仅自己可见'}
                                />
                            </View>
                        </View>
                    </View>
                </View>
                <View style={{ flexDirection: 'row', alignItems: 'center', justifyContent: 'center', marginVertical: 50 }}>
                    <View style={{ flex: 1, justifyContent: 'center', alignItems: 'center', marginHorizontal: 25 }}>
                        <Image resizeMode='cover' style={{ width: 28, height: 28 }} source={require('../../../static/images/icon-fankui.png')} />
                        <Text style={{ fontSize: 12, color: '#8A90A8', lineHeight: 16, marginTop: 8 }}>问题反馈</Text>
                    </View>
                    <View style={{ flex: 1, justifyContent: 'center', alignItems: 'center', marginHorizontal: 25 }}>
                        <Image resizeMode='cover' style={{ width: 28, height: 28 }} source={require('../../../static/images/icon-shuaxin.png')} />
                        <Text style={{ fontSize: 12, color: '#8A90A8', lineHeight: 16, marginTop: 8 }}>重置实盘</Text>
                    </View>
                    <View style={{ flex: 1, justifyContent: 'center', alignItems: 'center', marginHorizontal: 25 }}>
                        <Image resizeMode='cover' style={{ width: 28, height: 28 }} source={require('../../../static/images/icon-chongzhi.png')} />
                        <Text style={{ fontSize: 12, color: '#8A90A8', lineHeight: 16, marginTop: 8 }}>更新API</Text>
                    </View>
                </View>
            </ScrollView>
        )
    }
}


export default connect(({ userInfo }) => ({
    userInfo
}))(Access)
